<template>
  <page-meta :page-style="'overflow:' + (showTuiDrawer || showTuiDrawer ? 'hidden' : 'visible')">
    <PageContainer>
      <view class="container">
        <Header title="高级版介绍" />
        <view>
          <view v-for="(v, index) in backgroundImgs" :key="index">
            <Images :src="v" width="100%" height="fit-content" mode="widthFix" />
          </view>
          <TButton text="申请体验" customClass="apply-for-btn" type='primary' @click="handleClickApplyFor"></TButton>
        </view>
        <ActionSheet v-model="showActionSheet" :itemList="itemList" @change="handleChangeActionSheet"></ActionSheet>
        <TuiDrawer :visible="showTuiDrawer" mode='bottom' :onClose="handleCloseDrawer">
          <view>
            <view class="drawer-header">
              <text>提交信息</text>
              <view class="icon-wrap" @click="showTuiDrawer = false">
                <text class="ali-icon">&#xe641;</text>
              </view>
            </view>
            <BasicsForm @register="register" @submit="formSubmit" />
          </view>
        </TuiDrawer>
      </view>
    </PageContainer>
  </page-meta>
</template>

<script lang="ts" setup>
/* systemIntroduction  */
import Header from '@/components/Header/index.vue';
import PageContainer from '@/components/PageContainer/index.vue';
import TButton from "@/components/TButtonGroup/TButton.vue";
import Images from '@/components/TImage/index.vue';
import ActionSheet, { type ActionSheetItem } from "@/components/ActionSheet/index.vue";
import TuiDrawer from "@/components/TuiDrawer/index.vue";
import BasicsForm from '@/components/Form/BasicsForm.vue';
import { ref } from 'vue';
import { toHuibangCloud } from '@/utils/dynamicConfig';
import { useForm } from '@/components/Form';
import { phoneReg, telReg } from '@/utils/Reg';
import type { ApplyForExperience } from '@/api/enterprisePropaganda/types';
import { sbmitApplyForMaterials } from '@/api/enterprisePropaganda';
import { Toast } from '@/utils';
import { TabbarPageEnum } from '@/enums/pageEnum';
import { switchTab } from '@/router';

const backgroundImgs = [
  'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/faq/image_01.jpg',
  'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/faq/image_02.jpg',
  'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/faq/image_03.jpg',
  'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/faq/image_04.jpg',
  'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/faq/image_05.jpg',
];

// 抽屉

const showTuiDrawer = ref(false);

const handleCloseDrawer = () => {
  showTuiDrawer.value = false;
}
 // 体验类型选项

const itemList: ActionSheetItem[] = [
  { text: '游客体验' },
  { text: '管理员体验' }
]
const showActionSheet = ref(false);
const handleChangeActionSheet = (index: number) => {
  if (index === 0) {
    switchTab(TabbarPageEnum.BASE_HOME);  
    return;
  }
  showTuiDrawer.value = true;
}

const handleClickApplyFor = () => {
  showActionSheet.value = true;
}

// 表单

const [register, { clearValidate }] = useForm({
  labelPosition: 'top',
  labelAlign: 'left',
  validateTrigger: 'bind',
  labelWidth: 120,
  isScrollToError: false,
  btnGroupOptions: {
    position: 'static',
    submit: {
      text: '提交并体验',
      type: 'primary',
      customClass: 'br-50',
    },
  },
  schemas: [
    {
      field: 'name',
      label: '联系人姓名',
      component: 'Input',
      required: true,
      rules: [
        {
          required: true,
          errorMessage: '联系人姓名必填'
        },
        {
          required: true,
          validateFunction: (_, val: string) => {
            return val.length <= 20;
          },
          errorMessage: '联系人姓名长度不得超过20个字符'
        },
      ],

    },
    {
      field: 'phone',
      label: '联系人手机号',
      required: true,
      component: 'InputNumber',
      rules: [
        {
          required: true,
          validateFunction: (_, val: string) => {
            return phoneReg.test(val);
          },
          errorMessage: '请输入正确的手机号',
        },
      ],
    },
    {
      field: 'orgName',
      label: '您所属组织名称',
      required: true,
      component: 'Input',
      rules: [
        {
          required: true,
          errorMessage: '您所属组织名称必填'
        },
        {
          required: true,
          validateFunction: (_, val: string) => {
            return val.length <= 20;
          },
          errorMessage: '您所属组织名称长度不得超过20个字符'
        },
      ],
    },
  ],
});

async function formSubmit(vals: ApplyForExperience) {
  await sbmitApplyForMaterials(vals);
  Toast({ icon: 'none', title: '资料提交成功' });
  handleCloseDrawer();
  switchTab(TabbarPageEnum.BASE_HOME)
}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 118rpx;
  background-color: #ffffff;

  ::v-deep .apply-for-btn {
    position: fixed;
    bottom: 30rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 686rpx;
    border-radius: 44rpx;
    height: 88rpx;
    box-shadow: 0px 4px 12px 0px rgba(0, 68, 203, 0.20), 1px 1px 4px 0px rgba(255, 255, 255, 0.25) inset;
  }

  ::v-deep .tui-drawer-container {
    border-radius: 22rpx 22rpx 0 0;
  }

  ::v-deep .form-items {
    margin-bottom: 100rpx;
  }

  .drawer-header {
    padding: 24rpx 32rpx;
    display: flex;
    justify-content: space-between;
    box-shadow: 0px -1px 0px 0px #EBEDF0 inset;
    margin-bottom: 24rpx;

    .ali-icon {
      color: #999996;
      font-size: 40rpx;
    }
  }
}
</style>